<template>
  <div class="AnLixq">
    <!--面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">{{ $store.state.isChinese? '首页': 'главная'}}</el-breadcrumb-item>
      <el-breadcrumb-item @click="handleClassicCaseClick">{{ $store.state.isChinese ? '经典案例' : 'Классический случай' }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$store.state.isChinese ? '案列详情': 'Детали случая'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="AnLixq-header">
      <h3>{{ $store.state.isChinese ? anlixq.titleCn : anlixq.titleRa }}</h3>
    </div>
    <div class="AnLixq-tupian">
      <img :src="anlixq.imgUrl.startsWith('http') ? anlixq.imgUrl : `${this.$NuoYiUrl}${anlixq.imgUrl}`" alt="案例展示"
           class="carousel-image"/>
    </div>
    <div class="AnLixq-content">
      <p>{{ $store.state.isChinese ? anlixq.descCn : anlixq.descRa }}</p>
    </div>
  </div>
  <!--  底部上一章下一章按钮 -->
  <div class="AnLixq-footer">
    <el-button-group class="AnLixq-footer-btn">
      <el-button type="primary" @click="preAnLixq">&lt;{{$store.state.isChinese ? '上一篇' : 'Предыдущая статья' }}</el-button>
      <el-button type="primary" @click="nextAnLixq">{{ $store.state.isChinese ? '下一篇' : 'Следующая статья' }} &gt;</el-button>
    </el-button-group>
  </div>
</template>

<script>
import '@/assets/css/homeview.css';
export default {
  name: "JdAlxq",
  data() {
    return {
      isChinese: true,
      anlixq: {},
      preAnLixq1: {},
    }
  },
  computed: {
  },
  created() {
    const id = this.$route.query.id;
    console.log("案例详情id：", id);
    this.getanlixq(id);
  },
  mounted() {
  },
  beforeDestroy() {
    // 确保在组件销毁之前停止监听事件
    EventBus.off('languageChanged');
  },

  methods: {
    async getanlixq(id) {
      //获取路由参数
      console.log(this.$route.query.id);
      const {data: res} = await this.$http.get("/jdal/findjdalById/" + id);
      console.log("案例详情：", res);
      this.anlixq = res.jdal;
    },
    handleClassicCaseClick() {
      // 跳转到经典案列页面
      this.$router.back();
    },
    /* 上一篇案例 */
    async preAnLixq() {
      const {data: res} = await this.$http.get("/jdal/findjdalprevById/" + this.anlixq.id);
      console.log("上一篇案例：", res);
      if (res.code === 200) {
        this.preAnLixq1 = res.jdal;
        // 跳转到上一篇案例详情页面
        this.getanlixq(this.preAnLixq1.id);
        console.log("跳转上一篇案例详情页面");
      } else if (res.code === 1404) {
        this.$message.warning({
          message: '没有上一篇案例',
          offset: 100 // 设置偏移量
        });
      }
    },
    /* 下一篇案例 */
    async nextAnLixq() {
      const {data: res} = await this.$http.get("/jdal/findjdalnextById/" + this.anlixq.id);
      console.log("下一篇案例：", res);
      if (res.code === 200) {
        this.preAnLixq1 = res.jdal;
        // 跳转到下一篇案例详情页面
        this.getanlixq(this.preAnLixq1.id);
        console.log("跳转下一篇案例详情页面"); // 跳转到下一篇案例详情页面
      } else if (res.code === 1404) {
        this.$message.warning({
          message: '没有下一篇案例',
          offset: 100 // 设置偏移量
        }); // 没有下一篇案例
      }
    },
  }
}

</script>

<style scoped>
.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
}
.AnLixq-header{
  margin-top: 100px;
}
.AnLixq {
  margin-top: 30px
}

.AnLixq-tupian {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 50px; /* 添加一些内边距 */
  border-radius: 8px; /* 边角圆润 */

}

.AnLixq-tupian img {
  max-width: 100%; /* 图片最大宽度为容器的100% */
  max-height: 200px; /* 可以设置一个最大高度 */
  height: auto; /* 自动调整高度以保持比例 */
  border-radius: 6px; /* 图片圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  object-fit: fill; /* 填充整个img元素，可能剪裁cover */
}

.AnLixq-content {
  text-align: justify; /* 两端对齐 */
  padding-left: 45px; /* 设置内边距 */
  padding-right: 45px; /* 设置内边距 */
  font-size: 16px; /* 调整文字大小，可以根据需求修改 */
  text-indent: 2em; /* 段落开头空两个字，单位为em，可以根据需求调整 */
  line-height: 1.6; /* 调整行高，提高可读性，可选 */
  color: #333; /* 设置字体颜色，通常选择深色以提高可读性 */
  font-family: 'Georgia', serif; /* 设置字体类型，可以根据需要更改 */
}

/* 底部按钮 */
.AnLixq-footer-btn {
  display: flex;
  justify-content: space-between !important;
  margin-top: 20px;
}
.AnLixq-footer-btn .el-button {
  transition: background-color 0.3s ease; /* 添加平滑过渡 */
}
.AnLixq-footer-btn .el-button:active {
  background-color: #d15f25; /* 点击时的橙棕色 */
  color: white; /* 修改文字颜色为白色以提高对比度 */
}
</style>